<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="setting-tab" type="card" tab-position="left">
      <el-tab-pane v-permission="['Ape.Setting.System']" label="基础设置" name="app">
        <keep-alive>
          <app-settings />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane v-permission="['AbpIdentity.SettingManagement']" label="身份标识设置" name="identity">
        <keep-alive>
          <identity-settings />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane v-permission="['AbpAccount.SettingManagement']" label="账户设置" name="account">
        <keep-alive>
          <account-settings />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import abp from 'abp'
import { mapGetters } from "vuex";
import AppSettings from "./components/AppSettings";
import IdentitySettings from "./components/IdentitySettings";
import AccountSettings from "./components/AccountSettings";

export default {
  name: "Settings",
  components: { AppSettings, IdentitySettings, AccountSettings },
  data() {
    return {
      activeName: "app"
    };
  },
  computed: {
    ...mapGetters(["tenantId"]),
    isMultiTenancyEnabled() {
      return abp.multiTenancy.isEnabled;
    }
  },
  created() {
    // this.activeName = 'app';
  },
  methods: {}
};
</script>

<style lang="scss">
.setting-tab {
  .el-tabs__header.is-left {
    margin-right: 0;
    .el-tabs__item.is-left{
      background-color: #f5f7fa;
      &.is-active{
        background-color: #fff;
      }
    }
  }
}
</style>
